<template>
    <page-wrapper :page-path="'/pages/user-info/user-info'" navTitle="个人信息" navBackgroundColor="#ffdf6a"
        :navTitleStyle="navTitleStyle">
        <view class="user-info-container">
            <!-- 头部区域：头像和操作按钮 -->
            <view class="header-section">
                <view></view>
                <view class="avatar-area" :style="{ top: `calc(150rpx + ${statusBarHeight}rpx)` }">
                    <!-- 使用上传组件的插槽自定义头像显示 -->
                    <view class="avatar-wrapper" @click="chooseAvatar">
                        <!-- 围绕头像旋转的行星小球 -->
                        <view class="planet-system">
                            <view class="planet-orbit orbit-1">
                                <view class="planet planet-1"></view>
                            </view>
                            <view class="planet-orbit orbit-2">
                                <view class="planet planet-2"></view>
                            </view>
                            <view class="planet-orbit orbit-3">
                                <view class="planet planet-3"></view>
                            </view>
                            <view class="planet-orbit orbit-4">
                                <view class="planet planet-4"></view>
                            </view>
                        </view>
                        
                        <image class="avatar" :src="userForm.avatar || '/static/images/avatar.png'" mode="aspectFill"></image>
                        <view class="edit-avatar">
                            <uni-icons type="camera-filled" size="20" color="#FFFFFF"></uni-icons>
                        </view>
                    </view>
                    <text class="avatar-tip">点击修改头像</text>
                    
                    <!-- 隐藏的上传组件 -->
                    <upload-file ref="uploadFile" v-model="userForm.avatar" folder-path="APP/PiggyBank/avatar"
                        :size="180" :image-only="true" :max-size="2" @change="handleAvatarChange" style="display:none;">
                    </upload-file>
                </view>
                
                <!-- 操作按钮区域 -->
                <view class="action-buttons">
                    <view class="action-btn cancel-btn" @click="resetForm">
                        <uni-icons type="refreshempty" size="24" color="#666666"></uni-icons>
                        <!-- <text>取消</text> -->
                    </view>
                    <view class="action-btn save-btn" @click="saveUserInfo">
                        <uni-icons type="upload" size="24" color="#666666"></uni-icons>
                        <!-- <text>保存</text> -->
                    </view>
                </view>
            </view>

            <!-- 表单区域 -->
            <scroll-view scroll-y="true" class="form-scroll-view">
                <view class="form-section">
                    <!-- 基本信息 -->
                    <view class="section-title">
                        <text>基本信息</text>
                    </view>
                    <view class="form-group">
                        <view class="form-item">
                            <text class="form-label">用户名</text>
                            <input class="form-input" type="text" v-model="userForm.username" placeholder="请输入用户名" />
                        </view>
                        <view class="form-item">
                            <text class="form-label">昵称</text>
                            <input class="form-input" type="text" v-model="userForm.nickname" placeholder="请输入昵称" />
                        </view>
                        <view class="form-item">
                            <text class="form-label">性别</text>
                            <view class="gender-options">
                                <view class="gender-option" :class="{ active: userForm.gender === 1 }"
                                    @click="selectGender(1)">
                                    <!-- <uni-icons type="person" size="16" :color="userForm.gender === 1 ? primaryColor : '#666666'"></uni-icons> -->
                                    <!-- <u-icon name="man" color="blue" size="24"></u-icon> -->
                                    <text>男</text>
                                </view>
                                <view class="gender-option" :class="{ active: userForm.gender === 2 }"
                                    @click="selectGender(2)">
                                    <!-- <uni-icons type="person" size="16" :color="userForm.gender === 2 ? primaryColor : '#666666'"></uni-icons> -->
                                    <!-- <u-icon name="woman" color="pink" size="24"></u-icon> -->
                                    <text>女</text>
                                </view>
                                <view class="gender-option" :class="{ active: userForm.gender === 0 }"
                                    @click="selectGender(0)">
                                    <!-- <uni-icons type="person" size="16" :color="userForm.gender === 0 ? primaryColor : '#666666'"></uni-icons> -->
                                    <!-- <u-icon name="question" color="gray" size="24"></u-icon> -->
                                    <text>无</text>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 联系方式 -->
                    <view class="section-title">
                        <text>联系方式</text>
                    </view>
                    <view class="form-group">
                        <view class="form-item">
                            <text class="form-label">手机号</text>
                            <input class="form-input" type="number" v-model="userForm.phone" placeholder="请输入手机号" />
                        </view>
                        <view class="form-item">
                            <text class="form-label">邮箱</text>
                            <view class="form-input-wrapper">
                                <text class="form-text">{{ userForm.email || '未设置' }}</text>
                                <view class="action-btn" @click="showChangeEmailModal">
                                    <text style="font-size: 30rpx">修改</text>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 安全设置 -->
                    <view class="section-title">
                        <text>安全设置</text>
                    </view>
                    <view class="form-group">
                        <view class="password-item" @click="showChangePasswordModal">
                            <view class="password-info">
                                <uni-icons type="locked" size="20" color="#666666"></uni-icons>
                                <text class="password-text">登录密码</text>
                            </view>
                            <view class="password-action">
                                <text class="password-status">已设置</text>
                                <uni-icons type="right" size="16" color="#999999"></uni-icons>
                            </view>
                        </view>
                    </view>

                    <!-- 其他信息 -->
                    <view class="section-title">
                        <text>其他信息</text>
                    </view>
                    <view class="form-group">
                        <view class="form-item form-textarea-item">
                            <!-- <text class="form-label">个人简介</text> -->
                            <view class="form-textarea-wrapper">
                                <textarea class="form-textarea" v-model="userForm.bio" placeholder="请输入个人简介"
                                    maxlength="200" />
                                <text class="textarea-counter">{{ userForm.bio ? userForm.bio.length : 0 }}/200</text>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>

            <!-- 修改密码弹窗 -->
            <uni-popup ref="passwordPopup" type="center" style="z-index: 999;">
                <view class="popup-content">
                    <view class="popup-header">
                        <text class="popup-title">修改密码</text>
                        <view class="popup-close" @click="closePasswordPopup">
                            <uni-icons type="close" size="20" color="#999999"></uni-icons>
                        </view>
                    </view>
                    <view class="popup-form">
                        <view class="popup-form-item">
                            <text class="popup-form-label">当前密码</text>
                            <input class="popup-form-input" type="password" v-model="passwordForm.oldPassword"
                                placeholder="请输入当前密码" />
                        </view>
                        <view class="popup-form-item">
                            <text class="popup-form-label">新密码</text>
                            <input class="popup-form-input" type="password" v-model="passwordForm.newPassword"
                                placeholder="请输入新密码" />
                        </view>
                        <view class="popup-form-item">
                            <text class="popup-form-label">确认新密码</text>
                            <input class="popup-form-input" type="password" v-model="passwordForm.confirmPassword"
                                placeholder="请再次输入新密码" />
                        </view>
                    </view>
                    <view class="popup-footer">
                        <button class="popup-btn" @click="confirmChangePassword">确认修改</button>
                    </view>
                </view>
            </uni-popup>

            <!-- 保留现有的邮箱修改相关弹窗 -->
            <uni-popup ref="emailVerifyPopup" type="center" style="z-index: 999;">
                <view class="popup-content">
                    <view class="popup-title">验证当前邮箱</view>
                    <view class="popup-form">
                        <view class="popup-form-item">
                            <text class="popup-form-label">当前邮箱:</text>
                            <text class="current-email">{{ userForm.email }}</text>
                        </view>
                        <view class="popup-form-item verification-code" v-if="emailChangeStep === 1">
                            <!-- <text class="popup-form-label">验证</text> -->
                            <input class="popup-form-input" type="text" v-model="emailChangeForm.currentEmailCode"
                                placeholder="请输入验证码" />
                            <button class="send-code-btn" :disabled="currentEmailCodeDisabled"
                                @click="sendCurrentEmailVerificationCode">
                                {{ currentEmailCodeText }}
                            </button>
                        </view>
                    </view>
                    <view class="popup-footer">
                        <button class="popup-btn cancel" @click="closeEmailVerifyPopup">取消</button>
                        <button class="popup-btn confirm" @click="verifyCurrentEmail"
                            v-if="emailChangeStep === 1">验证</button>
                        <button class="popup-btn send" @click="sendCurrentEmailVerificationCode"
                            v-if="emailChangeStep === 0">
                            发送验证码
                        </button>
                    </view>
                </view>
            </uni-popup>

            <uni-popup ref="newEmailPopup" type="center" style="z-index: 999;">
                <view class="popup-content">
                    <view class="popup-title">更改邮箱</view>
                    <view class="popup-form">
                        <view class="popup-form-item">
                            <text class="popup-form-label">新邮箱</text>
                            <input class="popup-form-input" type="text" v-model="emailChangeForm.newEmail"
                                placeholder="请输入新邮箱" />
                        </view>
                        <view class="popup-form-item verification-code" v-if="emailChangeStep === 3">
                            <text class="popup-form-label">验证码</text>
                            <input class="popup-form-input" type="text" v-model="emailChangeForm.newEmailCode"
                                placeholder="请输入验证码" />
                            <button class="send-code-btn" :disabled="newEmailCodeDisabled"
                                @click="sendNewEmailVerificationCode">
                                {{ newEmailCodeText }}
                            </button>
                        </view>
                    </view>
                    <view class="popup-buttons">
                        <button class="popup-btn cancel" @click="closeNewEmailPopup">取消</button>
                        <button class="popup-btn confirm" @click="verifyNewEmail"
                            v-if="emailChangeStep === 3">确认修改</button>
                        <button class="popup-btn send" @click="sendNewEmailVerificationCode"
                            v-if="emailChangeStep === 2">
                            发送验证码
                        </button>
                    </view>
                </view>
            </uni-popup>
        </view>
    </page-wrapper>
</template>

<script>
import { getUserInfo, updateUserInfo, updateUserPassword } from '@/api/user.js';
import { themeMixin } from '@/utils/theme.js';
import PageWrapper from '@/components/page-wrapper/page-wrapper.vue';
import UploadFile from '@/components/upload-file/upload-file.vue';
import { sendVerificationCode, verifyEmailCode } from '@/api/common.js';
// 引入uView的图标组件
// import uIcon from 'uview-ui/components/u-icon/u-icon.vue';
// 引入用户状态管理
import { useUserStore } from '@/store/userStore.js';

export default {
    components: {
        PageWrapper,
        UploadFile
    },
    mixins: [themeMixin],
    data() {
        return {
            navTitleStyle: {
                color: '#FFFFFF'
            },
            userForm: {
                id: null,
                username: '',
                nickname: '',
                avatar: '',
                email: '',
                phone: '',
                gender: 0,
                bio: ''
            },
            originalUserInfo: null,
            tempAvatar: '',
            passwordForm: {
                oldPassword: '',
                newPassword: '',
                confirmPassword: ''
            },
            // 保留现有的邮箱相关数据
            forgetPasswordForm: {
                email: '',
                code: '',
                newPassword: '',
                confirmPassword: ''
            },
            sendCodeDisabled: false,
            sendCodeText: '发送验证码',
            countdownTimer: null,
            countdown: 60,
            emailChangeStep: 0,
            emailChangeForm: {
                currentEmailCode: '',
                newEmail: '',
                newEmailCode: ''
            },
            currentEmailCodeDisabled: false,
            currentEmailCodeText: '发送验证码',
            newEmailCodeDisabled: false,
            newEmailCodeText: '发送验证码',
          
          // 状态栏高度
          statusBarHeight: 0,
        }
    },
    onLoad() {
        // 获取状态栏高度
        this.getStatusBarHeight();
        // 尝试从 Pinia store 获取用户信息
        this.getUserData();
    },
    methods: {
        // 获取状态栏高度
        getStatusBarHeight() {
            // #ifdef APP-PLUS || MP
            this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 20 || 0;
            // #endif
        },

        // 获取用户数据
        async getUserData() {
            try {
                uni.showLoading({
                    title: '加载中...',
                    mask: true
                });
                
                // 使用 Pinia store 的 fetchUserInfo 方法获取用户数据
                const userStore = useUserStore();
                const userData = await userStore.fetchUserInfo();
                
                if (userData) {
                    this.userForm = {
                        id: userData.id,
                        username: userData.username || '',
                        nickname: userData.nickname || '',
                        avatar: userData.avatar || '',
                        email: userData.email || '',
                        phone: userData.phone || '',
                        gender: userData.gender !== undefined ? userData.gender : 0,
                        bio: userData.bio || ''
                    };
                    this.originalUserInfo = JSON.parse(JSON.stringify(this.userForm));
                    console.log('获取用户数据成功');
                } else {
                    console.warn('获取用户数据失败');
                    uni.showToast({
                        title: '获取用户信息失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('获取用户数据失败:', error);
                uni.showToast({
                    title: '获取用户信息失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        },

        // 选择头像
        chooseAvatar() {
            // 直接调用上传组件的handleChooseFile方法
            this.$refs.uploadFile.handleChooseFile();
        },

        // 处理头像变更
        async handleAvatarChange(fileInfo) {
            try {
                if (fileInfo?.tempFile) {
                    uni.showLoading({
                        title: '上传中...',
                        mask: true
                    });

                    const uploadComponent = this.$refs.uploadFile;
                    const avatarUrl = await uploadComponent.upload();
                    
                    // 更新头像URL
                    this.userForm.avatar = avatarUrl;
                    
                    // 直接调用保存方法，自动保存所有用户信息
                    await this.saveUserInfo();
                }
            } catch (error) {
                console.error('上传头像失败:', error);
                uni.showToast({
                    title: '上传头像失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        },

        // 选择性别
        selectGender(gender) {
            this.userForm.gender = gender;
        },

        // 显示修改密码弹窗
        showChangePasswordModal() {
            this.passwordForm = {
                oldPassword: '',
                newPassword: '',
                confirmPassword: ''
            };
            this.$refs.passwordPopup.open();
        },

        // 关闭修改密码弹窗
        closePasswordPopup() {
            this.$refs.passwordPopup.close();
        },

        // 确认修改密码
        async confirmChangePassword() {
            if (!this.passwordForm.oldPassword) {
                uni.showToast({
                    title: '请输入当前密码',
                    icon: 'none'
                });
                return;
            }

            if (!this.passwordForm.newPassword) {
                uni.showToast({
                    title: '请输入新密码',
                    icon: 'none'
                });
                return;
            }

            if (this.passwordForm.newPassword.length < 6) {
                uni.showToast({
                    title: '密码长度不能少于6位',
                    icon: 'none'
                });
                return;
            }

            if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
                uni.showToast({
                    title: '两次输入的密码不一致',
                    icon: 'none'
                });
                return;
            }

            try {
                uni.showLoading({
                    title: '修改中...',
                    mask: true
                });

                const res = await updateUserPassword({
                    oldPassword: this.passwordForm.oldPassword,
                    newPassword: this.passwordForm.newPassword
                });

                if (res.data && (res.data.code === 1 || res.data.code === 200)) {
                    uni.showToast({
                        title: '密码修改成功',
                        icon: 'success'
                    });
                    this.$refs.passwordPopup.close();
                } else {
                    uni.showToast({
                        title: res.data?.msg || '修改失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('修改密码失败:', error);
                uni.showToast({
                    title: '修改失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        },

        // 重置表单
        resetForm() {
            uni.showModal({
                title: '提示',
                content: '确定要取消修改吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.userForm = JSON.parse(JSON.stringify(this.originalUserInfo));
                        uni.navigateBack();
                    }
                }
            });
        },

        // 保存用户信息
        async saveUserInfo() {
            if (!this.validateForm()) {
                return;
            }

            try {
                uni.showLoading({
                    title: '保存中...',
                    mask: true
                });

                const res = await updateUserInfo(this.userForm);
                if (res.data && (res.data.code === 1 || res.data.code === 200)) {
                    uni.showToast({
                        title: '保存成功',
                        icon: 'success'
                    });
                    this.originalUserInfo = JSON.parse(JSON.stringify(this.userForm));
                    
                    // 更新 Pinia store 中的用户信息 - 通过重新获取用户信息
                    const userStore = useUserStore();
                    // 先清除现有用户信息，强制重新获取
                    userStore.clearUserInfoCache();
                    // 重新从服务器获取用户信息
                    await userStore.fetchUserInfo(true);
                    
                    // 确保登录状态保持
                    if (!userStore.isLoggedIn) {
                        userStore.setLoggedIn(true);
                    }
                } else {
                    uni.showToast({
                        title: res.data?.msg || '保存失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('保存用户信息失败:', error);
                uni.showToast({
                    title: '保存失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        },

        // 表单验证
        validateForm() {
            if (this.userForm.nickname && this.userForm.nickname.length > 20) {
                uni.showToast({
                    title: '昵称不能超过20个字符',
                    icon: 'none'
                });
                return false;
            }

            if (this.userForm.phone && !/^1[3-9]\d{9}$/.test(this.userForm.phone)) {
                uni.showToast({
                    title: '请输入正确的手机号格式',
                    icon: 'none'
                });
                return false;
            }

            return true;
        },

        // 保留现有的邮箱修改相关方法
        showChangeEmailModal() {
            this.emailChangeStep = 0;
            this.$refs.emailVerifyPopup.open();
        },

        // 关闭邮箱验证弹窗
        closeEmailVerifyPopup() {
            this.$refs.emailVerifyPopup.close();
        },

        // 发送当前邮箱验证码
        async sendCurrentEmailVerificationCode() {
            if (!this.userForm.email) {
                uni.showToast({
                    title: '邮箱不能为空',
                    icon: 'none'
                });
                return;
            }

            try {
                uni.showLoading({
                    title: '发送中...',
                    mask: true
                });

                // 调用发送验证码接口
                const res = await sendVerificationCode({
                    email: this.userForm.email,
                    subject: '验证当前邮箱',
                    content: '<p>您好，您正在验证当前邮箱，验证码为：</p>'
                });

                if (res.data && (res.data.code === 1 || res.data.code === 200)) {
                    uni.showToast({
                        title: '验证码已发送',
                        icon: 'success'
                    });

                    // 进入下一步
                    this.emailChangeStep = 1;
                    // 开始倒计时
                    this.startCurrentEmailCountdown();
                } else {
                    uni.showToast({
                        title: (res.data && res.data.msg) || '发送失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('发送验证码失败:', error);
                uni.showToast({
                    title: '发送失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        },

        // 开始当前邮箱验证码倒计时
        startCurrentEmailCountdown() {
            this.currentEmailCodeDisabled = true;
            let countdown = 60;
            this.currentEmailCodeText = `${countdown}S`;

            const timer = setInterval(() => {
                countdown--;
                this.currentEmailCodeText = `${countdown}S`;

                if (countdown <= 0) {
                    clearInterval(timer);
                    this.currentEmailCodeDisabled = false;
                    this.currentEmailCodeText = '发送验证码';
                }
            }, 1000);
        },

        // 发送新邮箱验证码
        async sendNewEmailVerificationCode() {
            if (!this.emailChangeForm.newEmail) {
                uni.showToast({
                    title: '请输入新邮箱',
                    icon: 'none'
                });
                return;
            }

            if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.emailChangeForm.newEmail)) {
                uni.showToast({
                    title: '请输入正确的邮箱格式',
                    icon: 'none'
                });
                return;
            }

            if (this.emailChangeForm.newEmail === this.userForm.email) {
                uni.showToast({
                    title: '新邮箱不能与当前邮箱相同',
                    icon: 'none'
                });
                return;
            }

            try {
                uni.showLoading({
                    title: '发送中...',
                    mask: true
                });

                // 调用发送验证码接口
                const res = await sendVerificationCode({
                    email: this.emailChangeForm.newEmail,
                    subject: '验证新邮箱',
                    content: '<p>您好，您正在验证新邮箱，验证码为：</p>'
                });

                if (res.data && (res.data.code === 1 || res.data.code === 200)) {
                    uni.showToast({
                        title: '验证码已发送',
                        icon: 'success'
                    });

                    // 进入下一步
                    this.emailChangeStep = 3;
                    // 开始倒计时
                    this.startNewEmailCountdown();
                } else {
                    uni.showToast({
                        title: (res.data && res.data.msg) || '发送失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('发送验证码失败:', error);
                uni.showToast({
                    title: '发送失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        },

        // 开始新邮箱验证码倒计时
        startNewEmailCountdown() {
            this.newEmailCodeDisabled = true;
            let countdown = 60;
            this.newEmailCodeText = `${countdown}秒后重试`;

            const timer = setInterval(() => {
                countdown--;
                this.newEmailCodeText = `${countdown}秒后重试`;

                if (countdown <= 0) {
                    clearInterval(timer);
                    this.newEmailCodeDisabled = false;
                    this.newEmailCodeText = '发送验证码';
                }
            }, 1000);
        },

        // 验证当前邮箱
        async verifyCurrentEmail() {
            if (!this.emailChangeForm.currentEmailCode) {
                uni.showToast({
                    title: '请输入验证码',
                    icon: 'none'
                });
                return;
            }

            try {
                uni.showLoading({
                    title: '验证中...',
                    mask: true
                });

                // 验证验证码
                const res = await verifyEmailCode({
                    email: this.userForm.email,
                    code: this.emailChangeForm.currentEmailCode
                });

                if (res.data && (res.data.code === 1 || res.data.code === 200)) {
                    // 验证成功，继续下一步
                    this.emailChangeStep = 2;
                    this.$refs.emailVerifyPopup.close();
                    this.$refs.newEmailPopup.open();
                } else {
                    uni.showToast({
                        title: (res.data && res.data.msg) || '验证码错误',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('验证失败:', error);
                uni.showToast({
                    title: '验证失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        },

        // 验证新邮箱
        async verifyNewEmail() {
            if (!this.emailChangeForm.newEmail) {
                uni.showToast({
                    title: '请输入新邮箱',
                    icon: 'none'
                });
                return;
            }

            if (!this.emailChangeForm.newEmailCode) {
                uni.showToast({
                    title: '请输入验证码',
                    icon: 'none'
                });
                return;
            }

            try {
                uni.showLoading({
                    title: '验证中...',
                    mask: true
                });

                // 验证验证码
                const res = await verifyEmailCode({
                    email: this.emailChangeForm.newEmail,
                    code: this.emailChangeForm.newEmailCode
                });

                if (res.data && (res.data.code === 1 || res.data.code === 200)) {
                    // 验证成功，更新邮箱
                    const updateRes = await updateUserInfo({
                        ...this.userForm,
                        email: this.emailChangeForm.newEmail
                    });

                    if (updateRes.data && (updateRes.data.code === 1 || updateRes.data.code === 200)) {
                        this.userForm.email = this.emailChangeForm.newEmail;
                        // 更新原始数据
                        this.originalUserInfo.email = this.emailChangeForm.newEmail;

                        uni.showToast({
                            title: '邮箱修改成功',
                            icon: 'success'
                        });

                        // 关闭弹窗
                        this.$refs.newEmailPopup.close();
                        // 重置表单
                        this.emailChangeForm = {
                            currentEmailCode: '',
                            newEmail: '',
                            newEmailCode: ''
                        };
                        this.emailChangeStep = 0;
                    } else {
                        uni.showToast({
                            title: updateRes.data?.msg || '更新邮箱失败',
                            icon: 'none'
                        });
                    }
                } else {
                    uni.showToast({
                        title: (res.data && res.data.msg) || '验证码错误',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('验证失败:', error);
                uni.showToast({
                    title: '验证失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        },

        // 关闭新邮箱弹窗
        closeNewEmailPopup() {
            this.$refs.newEmailPopup.close();
            // 重置表单
            this.emailChangeForm = {
                currentEmailCode: '',
                newEmail: '',
                newEmailCode: ''
            };
            this.emailChangeStep = 0;
        },
    }
}
</script>

<style lang="scss">
.user-info-container {
    // background-color: $background-color;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    // 状态栏占位空间
    .status-bar {
        width: 100%;
        background-color: transparent;
    }


    // 头部区域
    .header-section {
        padding: 40rpx 30rpx;
        // background-color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // box-shadow: $shadow-small;
        z-index:999;

        .avatar-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: fixed;
            // top: calc( 150rpx + statusBarHeight +'rpx');
            left: 50%;
            transform: translateX(-50%);

            .avatar-wrapper {
                position: relative;
                width: 150rpx;
                height: 150rpx;
                border-radius: 50%;
                overflow: visible;
                
                // 行星系统
                .planet-system {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: -1;
                    
                    .planet-orbit {
                        position: absolute;
                        border-radius: 50%;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        
                        &.orbit-1 {
                            width: 200rpx;
                            height: 200rpx;
                            animation: rotate 8s linear infinite;
                        }
                        
                        &.orbit-2 {
                            width: 260rpx;
                            height: 260rpx;
                            animation: rotate 12s linear infinite reverse;
                        }
                        
                        &.orbit-3 {
                            width: 320rpx;
                            height: 320rpx;
                            animation: rotate 15s linear infinite;
                        }
                        
                        &.orbit-4 {
                            width: 380rpx;
                            height: 380rpx;
                            animation: rotate 20s linear infinite reverse;
                        }
                        
                        .planet {
                            position: absolute;
                            border-radius: 50%;
                            transform: translate(-50%, -50%);
                            box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
                            
                            &.planet-1 {
                                width: 24rpx;
                                height: 24rpx;
                                background: linear-gradient(45deg, #ff9a9e, #fad0c4);
                                top: 0;
                                left: 50%;
                                box-shadow: 0 0 10rpx rgba(255, 154, 158, 0.7);
                            }
                            
                            &.planet-2 {
                                width: 18rpx;
                                height: 18rpx;
                                background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
                                top: 0;
                                left: 50%;
                                box-shadow: 0 0 10rpx rgba(161, 196, 253, 0.7);
                            }
                            
                            &.planet-3 {
                                width: 22rpx;
                                height: 22rpx;
                                background: linear-gradient(45deg, #d4fc79, #96e6a1);
                                top: 0;
                                left: 50%;
                                box-shadow: 0 0 10rpx rgba(212, 252, 121, 0.7);
                            }
                            
                            &.planet-4 {
                                width: 16rpx;
                                height: 16rpx;
                                background: linear-gradient(45deg, #a18cd1, #fbc2eb);
                                top: 0;
                                left: 50%;
                                box-shadow: 0 0 10rpx rgba(161, 140, 209, 0.7);
                            }
                        }
                    }
                }
                
                .avatar {
                    width: 150rpx;
                    height: 150rpx;
                    object-fit: cover;
                    border-radius: 50%;
                    position: relative;
                    z-index: 1;
                    box-shadow: $shadow-small;
                }

                .edit-avatar {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 50rpx;
                    background-color: rgba(0, 0, 0, 0.2);
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 2;
                }
            }

            .avatar-tip {
                margin-top: 16rpx;
                font-size: $font-size-small;
                color: $text-color-light;
            }
        }

        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 20rpx;

            .action-btn {
                width: 120rpx;
                height: 80rpx;
                border-radius: 40rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                // box-shadow: $shadow-small;

                text {
                    font-size: $font-size-small;
                    margin-top: 6rpx;
                }

                &.cancel-btn {
                    // background-color: #f5f5f5;
                    color: $text-color;
                }

                &.save-btn {
                    // background-color: $primary-color;
                    color: $text-color;
                }
            }
        }
    }

    // 表单区域
    .form-scroll-view {
        height: calc(100vh - 450rpx);
        padding: 20rpx;
        box-sizing: border-box;
    }

    .form-section {
      background-color: #FFFFFF;
      border-radius: 20rpx;

        .section-title {
            padding: 30rpx 20rpx 20rpx;
            font-size: $font-size-medium;
            color: $text-color;
            font-weight: bold;
        }

        .form-group {
            border-radius: 16rpx;
            padding: 0 30rpx;
            margin-bottom: 20rpx;
            //box-shadow: $shadow-small;
        }

        .form-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30rpx 10rpx;
            border-bottom: 1rpx solid $border-color;

            &:last-child {
                border-bottom: none;
            }

            .form-label {
                font-size: $font-size-medium;
                color: $text-color;
                margin-bottom: 16rpx;
                display: block;
                width: 200rpx;
            }

            .form-input {
                width: 100%;
                height: 80rpx;
                font-size: $font-size-medium;
                color: $text-color-lighter;
                flex: 1;
                text-align: right;
            }

            .form-input-wrapper {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .form-text {
                    font-size: $font-size-medium;
                    color: $text-color;
                }

                .action-btn {
                    padding: 10rpx 20rpx;
                    color: $primary-color;
                    font-size: $font-size-small;
                }
            }
        }

        // 密码项样式
        .password-item {
            padding: 30rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .password-info {
                display: flex;
                align-items: center;
                
                .password-text {
                    font-size: $font-size-medium;
                    color: $text-color;
                    margin-left: 16rpx;
                }
            }

            .password-action {
                display: flex;
                align-items: center;
                
                .password-status {
                    font-size: $font-size-small;
                    color: $text-color-light;
                    margin-right: 10rpx;
                }
            }
        }

        // 性别选择
        .gender-options {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 20rpx;

            .gender-option {
                flex: 1;
                height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1rpx solid $border-color;
                border-radius: 8rpx;
                font-size: $font-size-medium;
                color: $text-color-lighter;

                &.active {
                    border-color: $primary-color;
                    background-color: rgba($primary-color, 0.1);
                    color: $primary-color;
                }

                text {
                    margin-left: 10rpx;
                }
            }
        }

        .form-textarea-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .form-label {
                width: 100%;
                text-align: left;
            }

            .form-textarea-wrapper {
                width: 100%;
            }
        }

        // 文本域
        .form-textarea-wrapper {
            position: relative;
            border: 1rpx solid $border-color;
            border-radius: 12rpx;
            padding: 20rpx;

            .form-textarea {
                // width: 100%;
                height: 200rpx;
                font-size: $font-size-medium;
                color: $text-color-lighter;
                line-height: 1.6;
            }

            .textarea-counter {
                position: absolute;
                right: 20rpx;
                bottom: 20rpx;
                font-size: $font-size-small;
                color: $text-color-light;
            }
        }
    }

    // 弹窗样式
    .popup-content {
        width: 600rpx;
        background-color: #FFFFFF;
        border-radius: 20rpx;
        padding: 40rpx;

        .popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;

            .popup-title {
                font-size: $font-size-large;
                font-weight: bold;
                color: $text-color;
            }

            .popup-close {
                padding: 10rpx;
            }
        }

        .popup-form {
            .popup-form-item {
                margin-bottom: 30rpx;
                display: flex;
                align-items: center;

                .popup-form-label {
                    font-size: $font-size-medium;
                    color: $text-color;
                    margin-bottom: 16rpx;
                    display: block;
                    width: 300rpx;
                }

                .current-email {
                    margin-left: 20rpx;
                    font-size: $font-size-medium;
                    color: $text-color;
                    margin-bottom: 16rpx;
                    display: block;
                }

                .popup-form-input {
                    width: 100%;
                    height: 80rpx;
                    border-bottom: 1rpx solid $border-color;
                    border-radius: 8rpx;
                    padding: 0 20rpx;
                    font-size: $font-size-medium;
                }
            }

            .verification-code {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20rpx;

                .popup-form-label {
                    font-size: $font-size-medium;
                    color: $text-color;
                    margin-bottom: 16rpx;
                    display: block;
                }

                .popup-form-input {
                    flex: 2;
                    height: 80rpx;
                    border: 1rpx solid $border-color;
                    border-radius: 8rpx;
                    padding: 0 20rpx;
                    font-size: $font-size-medium;
                }

                .send-code-btn {
                    flex: 1;
                    height: 80rpx;
                    line-height: 80rpx;
                    color: $text-color-white;
                    background-color:$primary-light;
                    border-radius: 20rpx;
                    padding: 0 20rpx;
                }
            }
        }

        .popup-footer {
            margin-top: 40rpx;
            display: flex;
            gap: 20rpx;

            .popup-btn {
                width: 100%;
                height: 90rpx;
                background-color: $primary-color;
                color: #FFFFFF;
                font-size: $font-size-medium;
                // font-weight: bold;
                border-radius: 45rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .cancel {
                background-color: $text-color-white;
                border: 1rpx solid $border-color;
                color: $text-color;
            }
        }
    }
}

// 添加旋转动画
@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>